<template>
  <div class="guide">
    <a-layout-header class='global-antd-header'>
      <global-down/>
    </a-layout-header>
    <div class='search-bg-img'>
      <div class='home-layout-menu'>
        <Global-Header/>

        <Layout-Tabs
            :menuList="menuList"
            :tabsPath="tabsPath"
            mode='horizontal'
        />
      </div>
    </div>
    <div class="guide-title">
      <div class="guideTitleLeft">
         <TitleCrumbs
          :title="title"
          :menuList="menuList"
        />
      </div>
      <div class="guide-title-center">办事指南</div>
    </div>
    <div class="guide-content">
      <div class="content-text">
        <div class="content-title">
          <a-tabs
              tab-position="left"
              @change="tabsChangeClick"
              :activeKey="activeKey"
          >
            <a-tab-pane
                v-for="item in titleArr"
                :key="item.id"
                :tab="item.title"
            >
            </a-tab-pane>
          </a-tabs>
        </div>
        <div
            v-html="htmlData"
            class="htmlData"
            ref="htmlData"
            id="htmlData"
        ></div>
      </div>
      <div
          class="guide-content-null"
          v-if="guideData"
      ></div>
    </div>
    <a-layout-footer>
      <BaseFooter/>
    </a-layout-footer>
    <Customer/>
  </div>
</template>

<script>
import {GlobalHeader, BaseFooter, GlobalDown} from "@/components"
import {runTheHallOnceGuide} from "@/api/approve/approve"
import LayoutTabs from '@/layout/adminLayout/components/LayoutTabs'
import TitleCrumbs from '@/layout/adminLayout/components/TitleCrumbs'
import {getLocalStorage} from "@/utils/localstore"
import {getMenuList} from "@/api/menu/menu"
import {getParams} from "@/utils"
import Customer from "@/components/customerService/Customer";
export default {
  name: 'RunTheHallOnceGuide',
  components: {
    GlobalHeader,
    LayoutTabs,
    BaseFooter,
    GlobalDown,
    Customer,
    TitleCrumbs
  },
  data() {
    return {
      title: '',
      htmlData: '',
      titleArr: [],
      activeKey: '',
      menuList: [],
      tabsPath: getParams().tabsPath,
      guideData: false
    }
  },
  created() {
    this.getGuide()
    this.getMenuList()
    this.$store.dispatch('getServerBgModule/getFiles');
  },
  methods: {
    getMenuList() {
      const menuProp = {
        roleId: getLocalStorage('roleId'),
        state: 4
      }
      getMenuList({
        ...menuProp
      }).then(async res => {
        const {data, success} = res
        if (success) {
          this.menuList = data
        }
      })
    },
    async getGuide() {
      const fdTemplateId = this.$route.query.fdTemplateId
      this.title = this.$route.query.title
      await runTheHallOnceGuide({fdTemplateId}).then(res => {
        const {data} = res.data[0]
        this.htmlData = data
        this.guideData = !data
      })
      this.tabsArrayList()
    },
    tabsArrayList() {
      const childNodes = this.$refs.htmlData.childNodes
      this.titleArr = []
      childNodes.forEach(item => {
        this.traverseChildNodes(item)
      })
      this.titleArr.forEach(item => {
        item.offsetTop = document.getElementById(`${item.id}`).offsetTop
      })
      this.activeKey = this.titleArr[0].id
    },
    traverseChildNodes(item) {
      if (item.childNodes) {
        if (item.id) {
          this.titleArr.push({
            id: item.id,
            title: item.textContent
          })
        }
        item.childNodes.forEach(item => {
          this.traverseChildNodes(item)
        })
      }
    },
    tabsChangeClick(id) {
      document.getElementById(`${id}`).scrollIntoView()
    }
  },
  mounted() {
    this.$refs.htmlData.addEventListener('scroll', () => {
      setTimeout(() => {
        for (let i = 0; i < this.titleArr.length; i++) {
          if (this.$refs.htmlData.scrollTop < (this.titleArr[i].offsetTop - 100)) {
            this.activeKey = this.titleArr[i].id
            return
          }
        }
      }, 300)
    })
  }
}
</script>

<style lang="less" scoped>
.guide {
  background-color: #e6f7ff;

  .home-layout-menu {
    height: 92px;
    background-color: #83bff5;
    display: grid;
    padding: 0 15%;
    justify-content: space-between;
    grid-template-columns: repeat(2, 1fr);
  }

  .ant-layout-header {
    background-color: #1890ff;
    padding: 0 15%;
    color: white;
    font-weight: bold;
    font-family: PingFangSC, PingFangSC-Medium;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .hearder {
    background-color: #fff;
    padding: 9px 15% 18px;

    .global-header {
      background-color: #fff;
    }
  }

  .guide-title {
    background-color: #fffdfd;
    height: 58px;
    padding: 0 15%;
    position: relative;

    .guideTitleLeft {
      position: absolute;
      margin: 21px 0 17px;
      color: #999999;

      .titleBule {
        color: #3296fa;
      }
    }

    .guide-title-center {
      height: 100%;
      font-size: 24px;
      color: #333333;
      font-weight: 600;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .guide-content {
    background-color: #e6f7ff;
    height: 100%;
    padding: 0 15%;
    position: relative;

    .content-text {
      margin: 24px 0;
      height: 750px;
      background-color: #fff;
      display: flex;

      .content-title {
        padding-top: 24px;
      }
    }

    .guide-content-null {
      position: absolute;
      top: 0;
      width: 70%;
      height: 100%;
      background-image: url("~@/assets/images/home/notMessage.png");
      background-size: 100% 100%;
    }
  }

  .ant-layout-footer {
    background-color: #2074d4;
  }
}

.htmlData {
  max-height: 100%;
  overflow: scroll;
  padding: 0 24px;
  margin-top: 24px;
  flex: 1;
}
</style>
